<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>管理端</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <script src="assets/js/vue.js"></script>
  <script src="assets/js/axios.js"></script>
  <link rel="stylesheet" href="assets/css/element.css">

  <!-- 引入组件库 -->
  <script src="assets/js/element.js"></script>
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <link href="assets/css/fonts.css" rel="stylesheet">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="img/favicon.ico">
  <!-- Tweaks for older IEs-->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
  <div class="page" id="app">
    <!-- Main Navbar-->
    <header class="header">
      <nav class="navbar">
        <!-- Search Box-->
        <div class="search-box">
          <button class="dismiss">
            <i class="icon-close"></i>
          </button>
          <form id="searchForm" action="#" role="search">
            <input type="search" placeholder="What are you looking for..." class="form-control">
          </form>
        </div>
        <div class="container-fluid">
          <div class="navbar-holder d-flex align-items-center justify-content-between">
            <!-- Navbar Header-->
            <div class="navbar-header">
              <!-- Navbar Brand -->
              <a href="index.html" class="navbar-brand d-none d-sm-inline-block">
                <div class="brand-text d-none d-lg-inline-block">
                  <span>电脑DIY技术分享 </span>
                  <strong>管理端</strong>
                </div>
                <div class="brand-text d-none d-sm-inline-block d-lg-none">
                  <strong>BD</strong>
                </div>
              </a>
              <!-- Toggle Button-->
              <a id="toggle-btn" href="#" class="menu-btn active">
                <span></span>
                <span></span>
                <span></span>
              </a>
            </div>
            <!-- Navbar Menu -->
            <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
              <!-- Logout    -->
<li class="nav-item">

                <a href="../computer/index.html" class="nav-link logout">
                  <span class="d-none d-sm-inline" >去主站</span>
                </a>
              </li>
              <li class="nav-item">
               
<a href="login.html" class="nav-link logout">
                  <span class="d-none d-sm-inline" @click="logout">注销</span>
                  <i class="fa fa-sign-out"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <!-- Side Navbar -->
      <nav class="side-navbar">
        <!-- Sidebar Header-->
        <div class="sidebar-header d-flex align-items-center">
          <div class="avatar">
            <img :src="userInfo.headImg" alt="..." class="img-fluid rounded-circle">
          </div>
          <div class="title">
            <h1 class="h4">Admin</h1>
            <p>管理员</p>
          </div>
        </div>
        <!-- Sidebar Navidation Menus-->
         <span class="heading">Main</span>
        <ul class="list-unstyled">
          <!-- <li><a href="index.html"> <i class="icon-home"></i>管理端 </a></li> -->
          <li>
            <a href="index.html">
              <i class="fa fa-bar-chart"></i>统计 </a>
          </li>
          <!-- <li><a href="forms.html"> <i class="icon-padnote"></i>首页管理 </a></li> -->
          <li>
            <a href="invitation.html">
              <i class="icon-padnote"></i>帖子管理 </a>
          </li>
          <li>
            <a href="#exampledropdownDropdown2" aria-expanded="false" data-toggle="collapse">
              <i class="icon-grid"></i>用户管理 </a>
            <ul id="exampledropdownDropdown2" class="collapse list-unstyled ">
              <li class="active">
                  <a href="member.html">用户列表</a>
                <a href="tables.html">用户举报管理</a>
              </li>
              <!-- <li><a href="jubao.html">举报</a></li> -->
              <!-- <li><a href="fengting.html">封停</a></li> -->
            </ul>
          </li>
          <li>
            <a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse">
              <i class="icon-interface-windows"></i>模块管理 </a>
            <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
              <li>
                <a href="lunbo.html">轮播图</a>
              </li>
              <!-- <li><a href="tuijian.html">推荐阅读</a></li> -->
              <li>
                <a href="gonggao.html">公告</a>
              </li>
              <li>
                <a href="module.html">帖子模块管理</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <div class="content-inner">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">模块管理</h2>
          </div>
        </header>
        <!-- Breadcrumb-->
        <div class="breadcrumb-holder container-fluid">
          <ul class="breadcrumb">
            <li class="breadcrumb-item">
              <a href="index.html">主页</a>
            </li>
            <li class="breadcrumb-item active">模块管理 </li>
          </ul>
        </div>
        <section class="tables">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-close">
                    <div class="dropdown">
                      <button type="button" id="closeCard1" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false" class="dropdown-toggle">
                        <i class="fa fa-ellipsis-v"></i>
                      </button>
                      <div aria-labelledby="closeCard1" class="dropdown-menu dropdown-menu-right has-shadow">
                        <a href="#" class="dropdown-item remove">
                          <i class="fa fa-times"></i>Close</a>
                        <a href="#" class="dropdown-item edit">
                          <i class="fa fa-gear"></i>Edit</a>
                      </div>
                    </div>
                  </div>


                  <el-button style="width:130px;position:absolute;right:20px;top:4px;margin-bottom:20px;z-index:200"
                    @click="addModule" type="warning">添加模块</el-button>

                  <el-table :data="tableData" ref="table1" style="width: 100%">
                    <el-table-column prop="moduleId" label="ID" width="180">
                    </el-table-column>

                    <el-table-column prop="NAME" label="模块名称" width="180">
                    </el-table-column>
                    <el-table-column prop="img" label="模块图标" width="180">
                      <template slot-scope="scope">
                        <img :src="scope.row.img" min-width="70" height="70" />
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" label="模块描述">
                    </el-table-column>
                    <el-table-column label="操作">
                      <template scope="scope">
                        <el-button type="text" @click="xiugai(scope.row)">修改</el-button>
                      </template>

                    </el-table-column>
                  </el-table>


                  <el-dialog title="模块编辑" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

                    <el-form ref="form1" :model="form1" label-width="80px">
                      <el-form-item label="id" v-show="isshow">
                        <el-input v-model="form1.id" readonly></el-input>
                      </el-form-item>
                      <el-form-item label="父模块">
                        <el-select v-model="form1.parentId" placeholder="请选择">
                          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="模块名称">
                        <el-input v-model="form1.NAME"></el-input>
                      </el-form-item>

                      <el-form-item label="模块图标">
                        <el-input v-model="form1.img" readonly></el-input>
                        <el-upload class="upload-demo" action="http://127.0.0.1:888/file/img" :on-success="success1">
                          <el-button size="small" type="primary">修改上传</el-button>
                        </el-upload>
                      </el-form-item>

                      <el-form-item label="模块描述">
                        <el-input v-model="form1.description"></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false;isshow=true">取 消</el-button>
                      <el-button type="primary" @click="onSubmit">{{isshow ? '确定' : '添加'}}</el-button>
                    </span>
                  </el-dialog>


                </div>
              </div>

            </div>
          </div>
        </section>
        <!-- Page Footer-->
        <footer class="main-footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6">
                <p>Copyright &copy; 2019. 郑州大学北校区 All rights reserved.
                  <a target="_blank" href="#">主站</a>
                </p>
              </div>
              <div class="col-sm-6 text-right">
                <p></p>
                <!-- Please do not remove the backlink to us unless you support further theme's development at https://bootstrapious.com/donate. It is part of the license conditions. Thank you for understanding :)-->
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
  <!-- JavaScript files-->
  <script src="vendor/jquery/jquery.min.js"></script>
  </script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  </script>
  <script src="vendor/chart.js/Chart.min.js"></script>
  <script src="vendor/jquery-validation/jquery.validate.min.js"></script>
  <!-- Main File-->
  <script src="js/front.js"></script>
</body>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      tableData: [],
      tempimg: '',
      isshow: true,
      form1: {
        id: '',
        NAME: '',
        img: '',
        description: '',
        parentId: '',
      },
      options: [{
        value: '1',
        label: 'DIY大杂烩'
      }, {
        value: '2',
        label: '技术交流区'
      },],
      seen: true,
      list: [],
      otherList: [],
      userInfo: {},
      formLabelWidth: '140px',
      form: {
        password: ''
      },
      dialogVisible: false,
      dialogFormVisible: false,

    },
    methods: {
      handleClose() {
        this.dialogVisible = false
        this.isshow = true
      },
      addModule() {
        var c = {}
        this.isshow = false
        this.xiugai(c)
      },
      xiugai(e) {
        console.log('e',e)
        this.dialogVisible = true
        this.form1 = e
        this.form1.id = e.moduleId
        console.log('for', this.form1)
        this.tempimg = ''
      },
      onSubmit() {
        if (!this.isshow) {
          this.onSubmit1()
          return
        }
        if (this.tempimg !== '') {
          this.form1.img = this.tempimg
        }
        this.form1.name = this.form1.NAME
        axios.put('http://127.0.0.1:888/module/update', this.form1).then(res => {
          if (res.data.code != 0) { location.href = (`login.html?backUrl=${escape(document.URL)}`) }
          if (res.data.code != 0) {
            location.href = ("login.html?BackUrl=")
          }
          this.dialogVisible = false
          this.$message({
            message: '修改成功',
            type: "success"
          });
        })
      },
      onSubmit1() {
        if (this.tempimg !== '') {
          this.form1.img = this.tempimg
        }
        this.form1.name = this.form1.NAME
        console.log(this.form1)
        axios.post('http://127.0.0.1:888/module/new', this.form1).then(res => {
          if (res.data.code != 0) { location.href = (`login.html?backUrl=${escape(document.URL)}`) }
          this.isshow = true
          this.dialogVisible = false
          this.$message({
            message: '添加成功',
            type: "success"
          }); 
          this.getList()
        })
      },
      success1(res, file, fileList) {
        this.tempimg = res.content
      },
      logout() {
        axios({
          method: 'get',
          headers: {
            'token': sessionStorage.getItem('token'),
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          url: 'http://127.0.0.1:888/member/out',
        }).then((re) => {
          console.log('re', re)
          if (re.data.code === 0) {
            this.$message({
              message: '注销成功',
              type: 'success'
            });
            sessionStorage.removeItem('userInfo')
            setTimeout('location.href=("index.html")', 500)

          }
        })
      },
      getList(param) {
        let _this = this
        axios.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded"
        axios.defaults.headers.token = sessionStorage.getItem('token')
        axios.get('http://127.0.0.1:888/module/list').then(res => {
          console.log('re', res.data.content)
          if (res.data.code != 0) { location.href = (`login.html?backUrl=${escape(document.URL)}`) }
          this.tableData = res.data.content
        })
      },
    },

    created: function (p) {
      let _this = this
      let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      if (userInfo == null) {
        location.href = (`login.html?backUrl=${escape(document.URL)}`)
      }
      console.log('user', userInfo)
      if (userInfo != null) {
        this.$data.userInfo = userInfo
      }
      _this.getList()


    }
  })


</script>

</html>